<template>
  <div class="layui-container">
    <div class="admin-login-background">
      <div class="layui-form login-form" style="box-shadow:none;background: hsla(0,0%,100%,.3);">
        <form class="layui-form">
          <div class="layui-form-item logo-title">
            <h1 style="color:#fff;">宿舍管理系统</h1>
          </div>
          <div class="layui-form-item">
            <label class="layui-icon layui-icon-username" for="username"></label>
            <input type="text" name="username" v-model.trim="account" placeholder="账户名" class="layui-input">
          </div>
          <div class="layui-form-item">
            <label class="layui-icon layui-icon-password" for="password"></label>
            <input type="password" name="password" v-model.trim="password" placeholder="密码" class="layui-input">
          </div>
          <div class="layui-form-item">
            <label class="layui-icon layui-icon-vercode" for="captcha"></label>
            <input type="text" name="captcha" v-model.trim="code" placeholder="图形验证码" class="layui-input captcha">
            <div class="captcha-img">
              <img id="captchaPic" :src="captchaSrc" style="cursor:pointer;" @click="getcaptchaSrc()">
            </div>
          </div>
          <div class="layui-form-item">
            <button class="layui-btn layui-btn-normal layui-btn-fluid" :disabled='disableTrue' type="button" @click="handleCheckcode()">登 入</button>
          </div>
        </form>
      </div>
    </div>
    <vue-particles class="login-bg" color='#39AFFD' :particleOpacity="0.7" :particlesNumber="100" shapeType="circle" :particleSize="4" linesColor="#8DD1FE" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="8" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push">
    </vue-particles>
  </div>
</template>

<script>
import { GetCaptcha, checkcode } from '@/api/api'
export default {
  data() {
    return {
      captchaSrc: '',
      code: '',
      account: '',
      password: '',
      disableTrue:false
    }
  },
  created() {
    this.getcaptchaSrc()
  },
  methods: {
    getcaptchaSrc() {
      GetCaptcha().then((result) => {
        console.log(result);
        const img = btoa(
          new Uint8Array(result).reduce((data, byte) => data + String.fromCharCode(byte), '')
        )
        // console.log(result.data);
        // console.log(result.data.cpacha);
        this.captchaSrc = 'data:image/png;base64,' + img
      }).catch((err) => {
        console.log(err);
      })
    },
    handleCheckcode() {
        this.disableTrue = true
      //执行登录请求接口的操作
      if (this.code == '' || this.account == '' || this.password == '') return this.$message.error('请填写完整的信息')
      checkcode({ code: this.code, account: this.account, password: this.password }).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          this.$message.success('' + res.msg + '')
          this.$store.commit('setUser',res.data)
          window.sessionStorage.setItem('token', res.data.token)
          this.$loading().close()
          this.$router.push('/home')
        } else {
          this.$message.error(res.msg)
          this.disableTrue = false
        }
      })
    }
  }
}
</script>



<style scoped>
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
html,body {
  background: #3e3e3e !important;
}
body:after {
  content: '';
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.layui-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #3e3e3e !important;
  background-size: cover;
}
.admin-login-background {
  width: 360px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 40%;
  margin-left: -180px;
  margin-top: -100px;
}
.logo-title {
  text-align: center;
  letter-spacing: 2px;
  padding: 14px 0;
}
.logo-title h1 {
  color: #1e9fff;
  font-size: 25px;
  font-weight: bold;
}
.login-form {
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  padding: 14px 20px;
  box-shadow: 0 0 8px #eeeeee;
}
.login-form .layui-form-item {
  position: relative;
}
.login-form .layui-form-item label {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 38px;
  line-height: 36px;
  text-align: center;
  color: #d2d2d2;
}
.login-form .layui-form-item input {
  padding-left: 36px;
}
.captcha {
  width: 60%;
  display: inline-block;
}
.captcha-img {
  display: inline-block;
  width: 34%;
  float: right;
}
.captcha-img img {
  height: 34px;
  border: 1px solid #e6e6e6;
  height: 36px;
  width: 100%;
}
</style>